import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import type { SorterResult } from 'antd/es/table/interface';
import React, { useRef, useState } from 'react';
import type { TableListItem } from './data';
import { queryCreditBlackList, removeCreditBlackList } from './service';

const TableList: React.FC<{}> = () => {
  const [ sorter, setSorter ] = useState<string>('');
  const actionRef = useRef<ActionType>();
  // @ts-ignore
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '车牌号',
            dataIndex: 'plateNumber',
    },
    {
      title: '过期时间',
            dataIndex: 'expiredDate',
      hideInSearch: true,
    },
    {
      title: '操作',
            dataIndex: 'options',
      render: (_, record) => {

        const onDeleteClick = async () => {
          await removeCreditBlackList({ id: record.id });
          // eslint-disable-next-line no-unused-expressions
          actionRef.current?.reload();
        };

        return (
          <div>
            <a onClick={ onDeleteClick }>删除</a>
          </div>
        );
      },
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<TableListItem>
        headerTitle="信用黑名单"
        actionRef={ actionRef }
        rowKey="id"
        onChange={ (_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<TableListItem>;
          if (sorterResult.field) {
            setSorter(`${ sorterResult.field }_${ sorterResult.order }`);
          }
        } }
        scroll={ { x: true } }
        params={ {
          sorter,
        } }
        toolBarRender={ () => [] }
        tableAlertRender={ () => false }
        request={ (params = {}) => {
          const { current: page, pageSize, ...filter } = params;
          return queryCreditBlackList({ page, pageSize, ...filter });
        } }
        columns={ columns }
        rowSelection={ false }
      />
    </PageHeaderWrapper>
  );
};

export default TableList;
